<template>
<el-form :model="form">
  <el-row>
    <el-col :span="8">
      <el-form-item label="字体大小">
        <el-select v-model="form.fontSize" @change="onChange" style="width:80px;">
          <el-option v-for="(item, index) in fontSizeList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="字体颜色">
        <el-color-picker v-model="form.color" show-alpha :predefine="predefineColors" @change="onChange">
        </el-color-picker>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="背景颜色">
        <el-color-picker v-model="form.bgColor" show-alpha :predefine="predefineColors" @change="onChange">
        </el-color-picker>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="6">
      <el-form-item label="加粗">
        <el-switch v-model="form.fontWeight" active-value="bold" :inactive-value="undefined" @change="onChange"></el-switch>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="删除线">
        <el-switch v-model="form.lineThrough" @change="onChange"></el-switch>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="斜体">
        <el-switch v-model="form.fontStyle" active-value="italic" :inactive-value="undefined" @change="onChange"></el-switch>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="下划线">
        <el-switch v-model="form.underline" @change="onChange"></el-switch>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
</template>

<script>
import { omitBy, isUndefined } from 'lodash';
export default {
  name: 'StyleSetting',
  props: {
    data: {
      type: Object
    }
  },
  components: {},
  data() {
    return {
      form: {},
      fontSizeList: [9, 10, 11, 12, 14, 16, 18, 24, 30, 36].map(t=>({
        label: t+'', value: t
      })),
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    async onChange(){
      await this.$nextTick()
      const payload = omitBy(this.form, isUndefined);
      this.$emit('change', payload);
    }
  },
  watch: {
    data: {
      handler(val){
        // console.log('watch.data', val)
        if(val){
          this.form = {...val}
        }
      },
      immediate: true,
    }
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
